<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__HOME_CSS__/mui.min.css">
    <link rel="stylesheet" href="__ADMIN_CSS__/bootstrap.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->

</head>

<body style="background-color: #efeff4">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">预定餐</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <div class="row " style="border-bottom: 1px solid #c0e5f7;">
            <label class="col-xs-12" >预定用餐时间</label>
            <div class="form-group col-lg-8 col-md-5 col-sm-8 col-xs-8 " >
                <!-- <label class="col-xs-12" >预定用餐时间</label>-->
                <div class="col-xs-12">
                    <input class="js-datepicker form-control"  type="date" id="date" name="date" value="" >
                </div>
                <div class="col-xs-12" style="margin-top: 2px">
                    <input type="checkbox" name="attr_name" id="attr_name" value="早餐"><span>早餐</span>
                    <input type="checkbox" name="attr_name" id="attr_name" value="午餐"><span>午餐</span>
                    <input type="checkbox" name="attr_name" id="attr_name" value="晚餐"><span>晚餐</span>
                </div>
            </div>
            <div class="form-group col-lg-3 col-md-6 col-sm-3 col-xs-3" >
                <div class="col-xs-12">
                    <button class="btn btn-success" id="add">加入</button>
                </div>
            </div>
        </div>

        <div >
            <div class="builder-table-body" >
                <table class="table table-builder table-hover table-bordered table-striped js-table-checkable-target" id="builder-table-main">
                    <tbody id="table-like">
                   <!--                     <tr class="">
                                            <td class=""><div class="table-cell">王某某</div></td>
                                            <td class=""><div class="table-cell">CCB255685676275d </div>
                                            </td><td class=""> <div class="table-cell" onclick="del(1)">删</div></td>
                                        </tr>-->
                    </tbody>
                    <tr class="put-into" style="display: none">
                        <td colspan="3" align="center">
                            <button class="btn btn-info " id="put-into">提 交</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>



    </div>
</div>
</body>
<script src="__HOME_JS__/mui.min.js"></script>
<script src="__ADMIN_JS__/core/jquery.min.js"></script>
<script src="__LIBS__/jquery-validation/jquery.validate.min.js"></script>
<script src="__ADMIN_JS__/core/bootstrap.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
</script>

<script>
    $(document).ready(function () {
        $("#put-into").click(function (){
            $.ajax({
                url: '/api/v1/addStreservation',
                type: 'post',
                dataType: 'json',
                //data: JSON.stringify({data:{status: "start"}}),
                data: JSON.stringify(tableLite),
                cache: false,
                headers: {
                    "Authorization":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.32Lys4hjjY2XRpM2r9YSmpYA798u821m_M5Tzb6wxIU",
                    'Content-Type': 'application/json'
                },
                success: function(res){
                    if (res.code == 200) {
                       // mui.toast(res.message,);
                        mui.alert(res.message, '提示', function() {
                            //location.reload() 方法重新加载当前web页面
                            location.reload();
                        });
                    }
                },
                error: function(e) {
                    alert(e.message)
                }
            });
        });

    })


    var dateArr  =[]
    var tableLite=[]
    $('#add').click(function (){
        var sub_data=[];
        date = $("input[name='date']").val();
        if ($.trim(date)=='') return false;
        $("input[type=checkbox]").each(function(){
            if(this.checked){
                //alert($(this).val());
                sub_data.push({
                    "attr_name": $(this).val(),
                    "start_time": ''
                })
            }
        });
        if (sub_data.length==0) return false;
        var obj ={
            "date":date,
            "comid":'',
            "sub_data":sub_data
        }
        if ($.inArray(date, dateArr)<0){
            dateArr.push(date);
            tableLite.push(obj)
        }else {
            for (i=0;i<=dateArr.length;i++){
                if (dateArr[i]===date){
                    tableLite[i]=obj;
                }
            }
        }
        // console.log(tableLite)
        setHrml(tableLite);
    })

    function del(index){
        dateArr.splice(index,1);
        tableLite.splice(index,1);
        $("#table-like tr").eq(index).remove()
        setHrml(tableLite)
        console.log(tableLite)
    }

    function setHrml(tableLite){
        var tableLiteHtml = "";
        for (var i=0; i< tableLite.length; i++){
            var key = i;
            var attr_name=[];
            var sub_data = tableLite[i].sub_data;
            for (var j=0; j< sub_data.length; j++){
                attr_name.push(sub_data[j].attr_name);
            }
            tableLiteHtml+='<tr class="">\n' +
                '               <td class=""><div class="table-cell">'+ tableLite[i].date+'</div></td>\n' +
                '               <td class=""><div class="table-cell">'+ attr_name +'</div></td>\n' +
                '               <td class=""><div class="table-cell" onclick="del('+key+')">删</div></td>\n' +
                '            </tr>';
        }
        $('.put-into').hide();
        if (tableLiteHtml!=='')  $('.put-into').show();
        $("#table-like").html(tableLiteHtml);
    }


</script>


</html>